<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JSON更新测试 - Lumina AI 内容管理后台</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <style>
        body { font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; }
    </style>
</head>
<body class="bg-gray-50 p-6">
    <div class="max-w-4xl mx-auto">
        <h1 class="text-3xl font-bold text-gray-800 mb-6">JSON更新功能测试</h1>
        
        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
            <!-- 测试创建内容文件 -->
            <div class="bg-white rounded-lg shadow p-6">
                <h2 class="text-xl font-semibold mb-4">测试创建内容文件</h2>
                <div class="space-y-4">
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-2">文件名</label>
                        <input type="text" id="testFileName" class="w-full px-3 py-2 border border-gray-300 rounded-md" 
                               value="Blogs/test-blog.md" placeholder="输入文件名">
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-2">内容</label>
                        <textarea id="testContent" rows="6" class="w-full px-3 py-2 border border-gray-300 rounded-md" 
                                  placeholder="输入Markdown内容"># 测试博客

这是一个测试博客内容。

## 功能测试

- 创建文件
- 更新JSON
- 完整流程</textarea>
                    </div>
                    <button onclick="testCreateFile()" class="w-full bg-blue-500 text-white py-2 px-4 rounded-md hover:bg-blue-600">
                        测试创建文件
                    </button>
                </div>
            </div>
            
            <!-- 测试保存JSON -->
            <div class="bg-white rounded-lg shadow p-6">
                <h2 class="text-xl font-semibold mb-4">测试保存JSON</h2>
                <div class="space-y-4">
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-2">测试数据</label>
                        <textarea id="testJsonData" rows="6" class="w-full px-3 py-2 border border-gray-300 rounded-md" 
                                  placeholder="输入JSON数据">{
  "test": "data",
  "timestamp": "2024-01-01"
}</textarea>
                    </div>
                    <button onclick="testSaveJson()" class="w-full bg-green-500 text-white py-2 px-4 rounded-md hover:bg-green-600">
                        测试保存JSON
                    </button>
                </div>
            </div>
        </div>
        
        <!-- 测试结果 -->
        <div class="mt-8 bg-white rounded-lg shadow p-6">
            <h2 class="text-xl font-semibold mb-4">测试结果</h2>
            <div id="testResults" class="space-y-2">
                <p class="text-gray-500">点击上方按钮开始测试...</p>
            </div>
        </div>
        
        <!-- 完整流程测试 -->
        <div class="mt-8 bg-white rounded-lg shadow p-6">
            <h2 class="text-xl font-semibold mb-4">完整流程测试</h2>
            <p class="text-gray-600 mb-4">测试创建博客的完整流程：创建内容文件 + 更新JSON数据</p>
            <button onclick="testFullFlow()" class="bg-yellow-500 text-white py-2 px-6 rounded-md hover:bg-yellow-600">
                测试完整流程
            </button>
        </div>
    </div>

    <script>
        function addResult(message, isSuccess = true) {
            const results = document.getElementById('testResults');
            const resultDiv = document.createElement('div');
            resultDiv.className = `p-3 rounded-md ${isSuccess ? 'bg-green-100 text-green-800' : 'bg-red-100 text-red-800'}`;
            resultDiv.textContent = `[${new Date().toLocaleTimeString()}] ${message}`;
            results.appendChild(resultDiv);
            results.scrollTop = results.scrollHeight;
        }
        
        async function testCreateFile() {
            try {
                const fileName = document.getElementById('testFileName').value;
                const content = document.getElementById('testContent').value;
                
                if (!fileName || !content) {
                    addResult('请输入文件名和内容', false);
                    return;
                }
                
                addResult('正在创建内容文件...');
                
                const response = await fetch('http://localhost:8001/api/blogs/create-content-file/', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                    },
                    body: JSON.stringify({
                        fileName: fileName,
                        content: content
                    })
                });
                
                if (response.ok) {
                    const result = await response.json();
                    addResult(`✅ 内容文件创建成功: ${result.message}`);
                } else {
                    const error = await response.json();
                    addResult(`❌ 创建失败: ${error.error}`, false);
                }
            } catch (error) {
                addResult(`❌ 请求失败: ${error.message}`, false);
            }
        }
        
        async function testSaveJson() {
            try {
                const jsonData = document.getElementById('testJsonData').value;
                
                if (!jsonData) {
                    addResult('请输入JSON数据', false);
                    return;
                }
                
                let parsedData;
                try {
                    parsedData = JSON.parse(jsonData);
                } catch (e) {
                    addResult('❌ JSON格式无效', false);
                    return;
                }
                
                addResult('正在保存JSON数据...');
                
                const response = await fetch('http://localhost:8001/api/blogs/save-json/', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                    },
                    body: JSON.stringify(parsedData)
                });
                
                if (response.ok) {
                    const result = await response.json();
                    addResult(`✅ JSON保存成功: ${result.message}`);
                } else {
                    const error = await response.json();
                    addResult(`❌ 保存失败: ${error.error}`, false);
                }
            } catch (error) {
                addResult(`❌ 请求失败: ${error.message}`, false);
            }
        }
        
        async function testFullFlow() {
            try {
                addResult('🚀 开始完整流程测试...');
                
                // 步骤1: 创建内容文件
                addResult('步骤1: 创建内容文件...');
                const fileName = 'Blogs/full-flow-test.md';
                const content = `# 完整流程测试博客

这是一个测试完整流程的博客内容。

## 测试内容

- 文件创建
- JSON更新
- 数据同步

## 结论

如果看到这个内容，说明完整流程测试成功！`;
                
                const fileResponse = await fetch('http://localhost:8001/api/blogs/create-content-file/', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                    },
                    body: JSON.stringify({
                        fileName: fileName,
                        content: content
                    })
                });
                
                if (!fileResponse.ok) {
                    throw new Error('创建内容文件失败');
                }
                
                addResult('✅ 内容文件创建成功');
                
                // 步骤2: 更新JSON数据
                addResult('步骤2: 更新JSON数据...');
                
                const testBlog = {
                    blogs: [
                        {
                            id: 999,
                            title: "完整流程测试博客",
                            summary: "测试创建博客的完整流程",
                            contentFile: fileName,
                            category: "技术实践",
                            tags: ["测试", "流程", "功能"],
                            author: "测试用户",
                            authorTitle: "测试工程师",
                            publishDate: "2024-01-01",
                            readCount: 0,
                            likeCount: 0,
                            commentCount: 0,
                            isHot: false,
                            isFeatured: false,
                            coverImage: "",
                            icon: "fas fa-test",
                            iconColor: "blue"
                        }
                    ],
                    categories: [],
                    authors: [],
                    tags: []
                };
                
                const jsonResponse = await fetch('http://localhost:8001/api/blogs/save-json/', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                    },
                    body: JSON.stringify(testBlog)
                });
                
                if (!jsonResponse.ok) {
                    throw new Error('保存JSON失败');
                }
                
                addResult('✅ JSON数据更新成功');
                addResult('🎉 完整流程测试成功！');
                
            } catch (error) {
                addResult(`❌ 完整流程测试失败: ${error.message}`, false);
            }
        }
    </script>
</body>
</html>
